/* Basics */
html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  padding: 0;
  background-color: #fff;
  color: #333;
  font: 1.05em/1.5 Lato, sans-serif;
}

a:link,
a:visited {
  color: #297ef2;
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

[role='application'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 100%;
}

/* Wrapper */
.popup {
  -webkit-flex: 0 0 30rem;
  -ms-flex: 0 0 30rem;
  flex: 0 0 30rem;
  padding: 1em 0;
}

.popup--large {
  -webkit-flex: 0 0 32rem;
  -ms-flex: 0 0 32rem;
  flex: 0 0 32rem;
}

.popup-btn,
a.popup-btn {
  display: block;
  text-align: center;
  margin: 2em 1em 0 1em;
  padding: 0.5em 0;
  background-color: white;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  border: 1px solid #d6d8da;
}

/* Header */
header a {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 3rem;
  height: 3rem;
  background: url('../images/cozy-bubble.svg') center center no-repeat;
}
header .shield {
  position: relative;
}
header .shield:after {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -15%;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--grannyApple) url('../images/locked.svg') center center / 60%
    auto no-repeat;
}
h1 {
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

/* Browser compatibility */
.compat-header img {
  display: block;
  width: 100%;
  height: auto;
}
.compat-header h1 {
  text-align: center;
  margin-bottom: 2rem;
}
.compat-browsers {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  list-style: none;
}
.compat-browsers li {
  padding: 1rem;
}
.compat-browsers a {
  display: block;
}
.compat-browsers img {
  display: block;
  margin-bottom: 0.5rem;
  width: 5rem;
  height: 5rem;
}
.compat-browsers span {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #297ef2;
}
.compat-tips {
  padding: 0;
  list-style: none;
}
.compat-tips li:before {
  content: '';
  position: relative;
  top: 0.1rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background: url('../images/icon-check-circle.svg') center center no-repeat;
}
.compat-help {
  margin-top: 2rem;
  text-align: center;
  font-weight: bold;
}

/* Form controls */
.controls {
  margin: 0 -4px;
}
.controls .c-btn {
  margin-bottom: 4px;
  min-width: calc(50% - 0.5rem);
}

/* Permissions */
.c-chip img {
  max-height: 2rem;
}
.lightbox {
  padding: 1rem;
  border: 1px solid var(--silver);
  border-radius: 0.5rem;
}
.lightbox p:first-child {
  margin-top: 0;
}
.perm-list {
  padding: 0;
  list-style: none;
}
.perm-list li {
  margin-bottom: 16px;
}
.perm-list li:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 16px;
  background-image: url('../images/icon-fallback.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: -9px;
}
li[class^='io.cozy.settings']:before,
li[class^='io.cozy.bank.settings']:before {
  background-image: url('../images/icon-settings.svg');
}
li[class^='io.cozy.accounts']:before {
  background-image: url('../images/icon-accounts.svg');
}
li[class^='io.cozy.apps']:before,
li[class^='io.cozy.apps.suggestions']:before {
  background-image: url('../images/icon-apps.svg');
}
li[class^='io.cozy.bank.accounts']:before {
  background-image: url('../images/icon-bank-accounts.svg');
}
li[class^='io.cozy.bank.groups']:before {
  background-image: url('../images/icon-bank-groups.svg');
}
li[class^='io.cozy.bank.operations']:before {
  background-image: url('../images/icon-bank-operations.svg');
}
li[class^='io.cozy.bills']:before {
  background-image: url('../images/icon-bill.svg');
}
li[class^='io.cozy.contacts']:before {
  background-image: url('../images/icon-contacts.svg');
}
li[class^='io.cozy.files']:before {
  background-image: url('../images/icon-files.svg');
}
li[class^='io.cozy.files.versions']:before {
  background-image: url('../images/icon-files-versions.svg');
}
li[class^='io.cozy.identities']:before {
  background-image: url('../images/icon-identities.svg');
}
li[class^='io.cozy.konnectors']:before {
  background-image: url('../images/icon-konnectors.svg');
}
li[class^='io.cozy.notifications']:before {
  background-image: url('../images/icon-notifications.svg');
}
li[class^='io.cozy.photos.albums']:before {
  background-image: url('../images/icon-photos-album.svg');
}
li[class^='io.cozy.jobs']:before {
  background-image: url('../images/icon-triggers.svg');
}
li[class^='io.cozy.triggers']:before {
  background-image: url('../images/icon-triggers.svg');
}
li[class^='io.cozy.permissions']:before {
  background-image: url('../images/icon-permissions.svg');
}
li[class^='io.cozy.oauth.clients']:before {
  background-image: url('../images/icon-device.svg');
}
li[class^='org.fing.mesinfos.client']:before,
li[class^='fr.maif.maifuser.societaire']:before {
  background-image: url('../images/icon-profile.svg');
}
li[class^='org.fing.mesinfos.consumptionstatement']:before {
  background-image: url('../images/icon-consumption.svg');
}
li[class^='org.fing.mesinfos.contract']:before,
li[class^='fr.maif.maifuser.contrat']:before {
  background-image: url('../images/icon-contract.svg');
}
li[class^='org.fing.mesinfos.energybreakdown']:before {
  background-image: url('../images/icon-energybreakdown.svg');
}
li[class^='org.fing.mesinfos.home']:before,
li[class^='fr.maif.maifuser.home']:before {
  background-image: url('../images/icon-home.svg');
}
li[class^='org.fing.mesinfos.paymentterms']:before,
li[class^='fr.maif.maifuser.paymentterms']:before {
  background-image: url('../images/icon-files-pen.svg');
}
li[class^='fr.maif.maifuser.foyer']:before {
  background-image: url('../images/icon-family.svg');
}
li[class^='org.fing.mesinfos.insuranceclaim']:before,
li[class^='fr.maif.maifuser.sinistre']:before {
  background-image: url('../images/icon-sinister.svg');
}

/* Cozy URL component */
.my-cozy-url {
  display: flex;
  align-items: stretch;
}
.my-cozy-url input,
.my-cozy-url .protocol {
  padding: 0.75em;
  font-size: 1em;
  line-height: 1.5;
  border: 1px solid #d6d8da;
  min-width: 0;
}
.my-cozy-url .protocol {
  display: flex;
  align-items: center;
  background-color: #f5f6f7;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  color: #32363f;
}
.my-cozy-url .protocol svg {
  position: relative;
  top: -0.1em;
  margin-right: 8px;
  fill: #5d6165;
}
.my-cozy-url .field {
  flex: 2 0 0;
  border-radius: 0;
}
.my-cozy-url .domain {
  flex: 1 0 0;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  color: #32363f;
}

@media (max-width: 35rem) {
  [role='application'] {
    height: auto;
  }
  .popup {
    box-sizing: border-box;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    padding: 1em;
  }
  h1 {
    font-size: 1.5rem;
  }
  .hide-on-mobile {
    display: none;
  }
  .my-cozy-url .protocol {
    display: none;
  }
  .my-cozy-url .field {
    border-radius: 4px 0 0 4px;
  }
  .my-cozy-url input {
    padding: 0.5em;
  }
}
